<template>
  <div>
    <a-form :layout="'inline'" :model="search" style="margin-left:20px">
      <a-form-item label="状态">
        <a-select v-model:value="search.ch_status" placeholder="please select your zone" @change="goPage(1)">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="0">待审核</a-select-option>
          <a-select-option value="1">已通过</a-select-option>
          <a-select-option value="2">已驳回</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="章节名">
        <a-input v-model:value="search.ch_name" placeholder/>
      </a-form-item>
      <a-form-item label="书名">
        <a-input v-model:value="search.b_name" placeholder/>
      </a-form-item>
      <a-form-item label="作者">
        <a-input v-model:value="search.u_name" placeholder/>
      </a-form-item>
      <a-form-item label="分类">
        <a-select v-model:value="search.cla_id" placeholder="please select your zone" @change="goPage(1)">
          <a-select-option value="">全部</a-select-option>
          <a-select-option v-for="object in classMap" :value="object.cla_id">{{object.cla_name}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="作品等级">
        <a-select v-model:value="search.level" placeholder="please select your zone" @change="goPage(1)">
          <a-select-option value="">全部</a-select-option>
          <a-select-option v-for="value in levelMap" :value="value">{{value}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="最后章节">
        <a-input v-model:value="search.ch_numh" placeholder/>
      </a-form-item>
      <a-form-item label="最前章节">
        <a-input v-model:value="search.ch_numl" placeholder/>
      </a-form-item>
      <a-form-item label="最高价">
        <a-input v-model:value="search.ch_priceh" placeholder/>
      </a-form-item>
      <a-form-item label="最低价">
        <a-input v-model:value="search.ch_pricel" placeholder/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="goPage(1)">查询</a-button>
      </a-form-item>
    </a-form>

    <a-table
      :dataSource="Data.list"
      :columns="columns"
      :pagination="pagination"
      :row-key="record => record.ch_id"
      @change="handleTableChange"
    >
      <template  #operation="{ record }">
        <a v-if="record.ch_status==0" @click="showChapter(record)">审核</a>
      </template>
    </a-table>
    <!--审核窗口-->
    <a-modal
      v-model:visible="visible"
      title="章节审核"
      @ok="handleOk"
      okText="驳回"
      width="100%"
      wrapClassName="full-modal"
    >
      <a-layout-content>
        <span>正文</span>
        <iframe :srcdoc="contentUrl" width="100%" height="400px" style="border:none"></iframe>
        <a-button type="primary" style="margin: 10px;float:right" @click="passChapter">通过</a-button>
        <span>给与反馈</span>
        <a-textarea v-model:value="hanObject.ch_edit_comment" placeholder="反馈评论" :rows="4"/>
      </a-layout-content>
    </a-modal>
  </div>
</template>
<script>
import { defineComponent, computed, ref, render, reactive } from "vue";
import { get, post, getBlob, tip } from "@/common";

const columns = [
  {
    title: "章节名",
    dataIndex: "ch_name",
    key: "name",
    ellipsis: true
  },
  {
    title: "章节序数",
    dataIndex: "ch_num",
    key: "ch_num"
  },
  {
    title: "章节价格",
    dataIndex: "ch_price",
    key: "ch_price"
  },
  {
    title: "对应书名",
    key: "b_name",
    dataIndex: "b_name",
    ellipsis: true
  },
  {
    title: "对应作品等级",
    dataIndex: "level",
    key: "level"
  },
  {
    title: "作者名称",
    dataIndex: "u_name",
    key: "u_name"
  },
  {
    title: "分类",
    dataIndex: "cla_name",
    key: "cla_name"
  },
  {
    title: " ",
    dataIndex: "operation",
    slots: {
      customRender: "operation"
    }
  }
];

//查询对象和结果对象
const Data = ref({});
const search = reactive({
  pageNum: 1,
  pageSize: 5,
  ch_status: "0",
  ch_id: "",
  ch_name: "",
  ch_numl: "",
  ch_numh: "",
  ch_pricel: "",
  ch_priceh: "",
  b_name: "",
  level: "",
  u_name: "",
  cla_id: ""
});


//获取价位和分类信息
const levelMap = ref([]);
const classMap = ref([]);
const getlevelMap = () =>{
  get("/staff/chapter/getlevel").then(res =>{
    levelMap.value = res.data;
  })
}
const getclassMap = () =>{
  get("/staff/chapter/getclass").then(res =>{
    classMap.value = res.data;
  })
}
getlevelMap();
getclassMap();

//分页插件
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取列表
const goPage = (pageNum = 1) => {
  search.pageNum = pageNum;
  search.pageSize = pagination.pageSize;

  get("/staff/chapter/search", search).then((res) => {
    Data.value = res.data; 
    pagination.current = Data.value.current;
    pagination.pageSize = Data.value.pageSize;
    pagination.total = Data.value.total;
  });
};
goPage(1);
 
//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  goPage(pagination.current);
};


//弹出审核窗口
const visible = ref(false);
const contentUrl = ref("");
const hanObject = reactive({
  ch_id: "",
  ch_edit_comment: "",
  ch_status: 0
});
const showChapter = ch => {
  hanObject.ch_id = ch.ch_id;
  contentUrl.value = "";
  visible.value = true;
  getTxt();
};
const passChapter = () => {
  console.log(hanObject.ch_id);
  hanObject.ch_status = 1;
  post("/staff/chapter/handle", hanObject).then(res => {
    hanObject.ch_id = "";
    hanObject.ch_edit_comment = "";
    hanObject.ch_status = 0;
    tip.success("审核完毕！");
    visible.value = false;
    goPage(search.pageNum);
  });
};
const handleOk = () => {
  console.log(hanObject.ch_id);
  console.log(hanObject.ch_edit_comment);
  hanObject.ch_status = 2;
  post("/staff/chapter/handle", hanObject).then(res => {
    hanObject.ch_id = "";
    hanObject.ch_edit_comment = "";
    hanObject.ch_status = 0;
    tip.success("驳回文章成功！");
    visible.value = false;
    goPage(search.pageNum);
  });
};

//文件流读取后端传来的html文件并写成文本
const getTxt = () => {
  getBlob(
    "/staff/chapter/getchapter/" + hanObject.ch_id,
    {},
    { loading: false }
  ).then(blob => {
    const reader = new FileReader();

    reader.addEventListener("load", () => {
      contentUrl.value = reader.result;
    });
    reader.readAsText(blob);
  });
};


export default defineComponent({
  setup() {
    return {
      Data,
      columns,
      pagination,
      visible,
      showChapter,
      passChapter,
      handleOk,
      getTxt,
      contentUrl,
      hanObject,
      search,
      levelMap,
      classMap,
      getlevelMap,
      getclassMap,
      handleTableChange,
      goPage
    };
  }
});
</script>
<style lang="less">
//审核弹出框style设定
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>